/*
 * @Author: jipeng.Li
 * @Date: 2020-01-23 17:10
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-03-02 16:12:37
 * @Description: 搜索输入
 */
import React from 'react';
import { StyleSheet, Text, TextInput, View, TouchableOpacity, Image } from 'react-native';
import { px2dp } from '@/styles';
import { iconSearchGray } from '@/images';

const Index = ({
  cancel,
  clearInp,
  onChangeText,
  inpValue,
  isCancel,
  isClear,
  placeholder = '搜索'
}) => {
  const _cancel = () => {
    cancel && cancel();
  };

  const _onChangeText = (text) => {
    onChangeText && onChangeText(text);
  };

  const _clear = () => {
    clearInp && clearInp();
  };

  return (
    <View style={styles.container}>
      <Image style={styles.searchIcon} source={iconSearchGray} />
      <View style={styles.SearchStyle}>
        <TextInput
          clearButtonMode='always'
          placeholder={placeholder}
          onChangeText={text => _onChangeText(text)}
          value={inpValue}
          style={{ lineHeight: px2dp(36) }}
        />
      </View>
      {
        isCancel &&
        <TouchableOpacity onPress={_cancel}>
          <Text style={styles.cancel}>取消</Text>
        </TouchableOpacity>
      }
    </View>
  );
};

export default Index;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    paddingTop: px2dp(20),
    paddingBottom: px2dp(20)
  },
  SearchStyle: {
    flex: 1,
    position: 'relative',
    backgroundColor: '#F2F3F7',
    height: px2dp(86),
    borderRadius: px2dp(10),
    paddingLeft: px2dp(70),
    // paddingRight: px2dp(80),
    justifyContent: 'center',
  },
  searchIcon: {
    width: px2dp(36),
    height: px2dp(36),
    position: 'absolute',
    left: px2dp(20),
    top: px2dp(46),
    zIndex: 1
  },
  clearWrap: {
    position: 'absolute',
    right: px2dp(20),
    top: px2dp(25),
    zIndex: 1
  },
  clearIcon: {
    width: px2dp(36),
    height: px2dp(36),

  },
  cancel: {
    color: '#647FDF',
    width: px2dp(68),
    fontSize: px2dp(34),
    height: px2dp(86),
    lineHeight: px2dp(86),
    marginLeft: px2dp(10)
  }

});
